<template>
  <div class="main">
    <el-card class="search-box">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="用户信息" prop="storeName">
          <el-input
            v-model="queryParams.queryValue"
            placeholder="请输入用户信息"
            clearable
            @keyup.enter.native="getList"
          />
        </el-form-item>
        <el-form-item label="用户身份" prop="userIdentity">
          <el-select v-model="queryParams.userIdentity" placeholder="请选择用户身份">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="time">
          <el-date-picker
            v-model="value"
            @change="selectTime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getList"
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="table-box">
        <el-table
          :data="tableData"
          v-loading="loading"
          :header-cell-style="{
            background: '#f5f7fa',
            color: '#000000',
          }"
          style="width: 100%"
        >
          <el-table-column prop="id" label="用户ID"> </el-table-column>
          <el-table-column prop="nickName" label="用户昵称"> </el-table-column>
          <el-table-column prop="phone" label="手机号码"> </el-table-column>
          <el-table-column prop="userIdentityValue" label="用户身份"> </el-table-column>
          <el-table-column prop="relateUser" label="上级推广员"> </el-table-column>
          <el-table-column prop="regTime" label="注册时间"> </el-table-column>
          <el-table-column prop="edit" label="操作" width="300"> 
            <template slot-scope="scope">
             
              <el-button  size="mini" type="success" @click="userDetails(scope.row.id)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNumber" :limit.sync="queryParams.pageSize" @pagination="getList" />
      
        </el-card>
  </div>
</template>

<script>
import { queryUserList } from "@/api/user";
import Pagination from '@/components/Pagination'
export default {
  name: "",
  components: {Pagination},
  props: {},
  data() {
    return {
      options: [
        {
          value: "1",
          label: "平台用户",
        },
        {
          value: "2",
          label: "讲师",
        },
      ],
      queryParams: {
        queryValue: "",
        userIdentity: '',
        startTime: "",
        endTime: "",
        pageSize: 10,
        pageNumber: 1,
      },
      loading:true,
      value:'',
      total: 0,
    tableData:[],
    };
  },
  watch: {},
  computed: {},
  methods: {
    resetQuery() {
      this.queryParams = {
        queryValue: "",
        userIdentity: '',
        startTime: "",
        endTime: "",
        pageSize: 10,
        pageNumber: 1,
      };
      this.getList();
    },
    selectTime(val) {
      this.queryParams.startTime = val[0] + "";
      this.queryParams.endTime = val[1] + "";
    },
    async getList(){
        const res = await queryUserList(this.queryParams);
        this.loading =false
        this.tableData = res.data.list
        this.total = res.data.total
    },
    userDetails(userId){
      this.$router.push({path:'/user/details',query: {userId}})
    }
  },
  created() {
    
    this.getList()
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
</style>